import React from 'react';
import { Card, Form, Row, Col, Button, Space, Input, Select, DatePicker } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { RangePicker } = DatePicker;

export interface SearchField {
  name: string;
  label: string;
  type: 'input' | 'select' | 'dateRange';
  placeholder?: string;
  options?: { value: any; label: string }[];
  span?: number;
}

export interface SearchFormProps {
  title?: string;
  fields: SearchField[];
  onSearch: (values: any) => void;
  onReset: () => void;
  form?: any;
  loading?: boolean;
}

const SearchForm: React.FC<SearchFormProps> = ({
  title = '查询条件',
  fields,
  onSearch,
  onReset,
  form,
  loading = false,
}) => {
  const renderField = (field: SearchField) => {
    const { type, placeholder, options } = field;

    switch (type) {
      case 'select':
        return (
          <Select placeholder={placeholder} allowClear>
            {options?.map(option => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        );
      case 'dateRange':
        return <RangePicker style={{ width: '100%' }} />;
      case 'input':
      default:
        return <Input placeholder={placeholder} allowClear />;
    }
  };

  return (
    <Card title={title} style={{ marginBottom: 16 }}>
      <Form
        form={form}
        layout="vertical"
        onFinish={onSearch}
      >
        <Row gutter={16}>
          {fields.map((field, index) => (
            <Col key={field.name} span={field.span || 6}>
              <Form.Item name={field.name} label={field.label}>
                {renderField(field)}
              </Form.Item>
            </Col>
          ))}
          <Col span={24}>
            <Form.Item label=" " style={{ marginTop: 4 }}>
              <Space>
                <Button 
                  type="primary" 
                  htmlType="submit" 
                  icon={<SearchOutlined />}
                  loading={loading}
                >
                  查询
                </Button>
                <Button onClick={onReset} icon={<ReloadOutlined />}>
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Card>
  );
};

export default SearchForm;